<template>
  <ga-table :data="data" size="medium" >
    <template #columns>

      <ga-table-column title="URL" data-index="url" ellipsis>
        <template #cell="{ record }">
          <ga-tooltip position="tl" :content="record.url || record.dstPort">
            <span>{{ record.url || record.dstPort }}</span>
          </ga-tooltip>
        </template>
      </ga-table-column>
      <template v-show="pageType === 'node'">
        <ga-table-column title="源端" :data-index="type === 'workload' ? 'srcWorkload' : 'srcPod'" ellipsis>
          <template #cell="{ record }">
            <ga-tooltip position="tl" :content="getSrc(record)">
              <span>{{ getSrc(record) }}</span>
            </ga-tooltip>
          </template>
        </ga-table-column>
      </template>

      <ga-table-column title="错误请求数" data-index="errorCount" :sortable="{  sortDirections: ['ascend', 'descend']}">
        <template #cell="{ record }">
          {{ record.errorCount }}
        </template>
      </ga-table-column>
      <ga-table-column title="慢请求数" data-index="slowCount" :sortable="{  sortDirections: ['ascend', 'descend']}" :width="120" ellipsis>
        <template #cell="{ record }">

          {{ record.slowCount }}
        </template>
      </ga-table-column>
      <ga-table-column title="协议" data-index="protocol" :width="110">
      </ga-table-column>
      <ga-table-column title="请求数" data-index="requestCount" :width="100" :sortable="{ sortDirections: ['ascend', 'descend'] }">
      </ga-table-column>
      <ga-table-column title="错误率" data-index="errorRate" :width="120" :sortable="{ sortDirections: ['ascend', 'descend'] }">
        <template #cell="{ record }">
          {{ formatUnit(record.errorRate, '100%') }}
        </template>
      </ga-table-column>
      <ga-table-column title="响应时间" data-index="responseTime" :width="160" :sortable="{ sortDirections: ['ascend', 'descend'] , sorter:responseSorter}">
        <template #cell="{ record }">
          <div class="flex">
            <div style="width: calc(100% - 80px)">
              <Chart :option="getResponseTime(record.responseTime)" height="22px" />
            </div>
            <div class="ml6">
              {{ formatUnit(record.meanTime, "ns") }}
            </div>
          </div>
        </template>
      </ga-table-column>
    </template>
  </ga-table>
</template>

<script setup>
import Chart from '@/components/ChartWithEmpty'
import { cloneDeep } from 'lodash'
import { buildLineSeriesData, lineWithoutAxis } from '@/utils/chartOption';
import { formatUnit } from '@/utils/format'
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  pageType: String,
  type: String
})

const emits = defineEmits(['on-click-exception'])
const columns = [{title:'请求数', dataIndex: 'requestCount'}]
function responseSorter(a,b, {direction}) {
  if(direction === 'ascend') {
    return a.meanTime - b.meanTime
  } else {
    return b.meanTime - a.meanTime
  }
}
const getSrc = (record) => {
  const key = props.type === 'workload' ? 'srcWorkload' : 'srcPod'
  return record[key]
}
const getResponseTime = (value) => {
  const options = cloneDeep(lineWithoutAxis)
  options.series.push(
    buildLineSeriesData("响应时间", value, {
      opacity: 0,
    })
  );
  options.tooltip.formatter = (params) => {
    const { marker, seriesName, value } = params[0];
    return (
      marker +
      seriesName +
      "：" +
      formatUnit(value, "ns")
    );
  };
  return options
}

</script>

<style scoped lang="less"></style>
